<template>
    <div class="content">
        <div class="con3">
            <div class="title">
                <div class="left">———————————————</div>
                <div class="left-abs"></div>
                <div class="tt">项目推进情况</div>
                <div class="right">———————————————</div>
                <div class="right-abs"></div>
            </div>
            <div class="con3-box">
                <div class="ling" v-for="item in projectCate" :key="item.ID">
                    <div :class="item.icon"></div>
                    <p>{{ item.项目分类 }}</p>
                </div>
            </div>
        </div>
        <div class="con3-box2">
            <div class="con3-box2-bx">
                <div class="left">
                    <div class="title">推进情况</div>
                    <div class="details">
                        <h5>一、推进总体完成情况</h5>
                        <p>
                            截止<span>{{zttj.年份}}</span> 年<span>{{
                                zttj.月份
                            }}</span
                        >月底，<span
                            class="blue"
                            @click="clickToAdvanceTheSituation(1, zttj.年份, zttj.月份)"
                        >{{ zttj.项目数 }}</span
                        >
                            个项目共完成投资<span>{{ zttj.总投资 }}</span
                        >亿元,完成年度计划投资的<span>{{ zttj.完成率 }}</span
                        >%。<b>从计划新开工项目情况来看，</b> {{ zttj.年份 }}年计划新开工项目<span
                            class="blue"
                            @click="clickToAdvanceTheSituation(5, zttj.年份, zttj.月份)"
                        >{{ zttj.本年计划开工 }}</span
                        >
                            个,1-{{ zttj.月份 }}月份应开工项目<span
                            @click="clickToAdvanceTheSituation(6, zttj.年份, zttj.月份)"
                        >{{ zttj.应开工 }}</span
                        >个,已开工项目<span
                            class="blue"
                            @click="clickToAdvanceTheSituation(7, zttj.年份, zttj.月份)"
                        >{{ zttj.计划内已开工 }}</span
                        >个，未按期开工项目<span
                            class="blue"
                            @click="clickToAdvanceTheSituation(8, zttj.年份, zttj.月份)"
                        >{{ this.zttj.未按期开工 }}</span
                        >个。从竣工项目情况来看,{{ zttj.年份 }}年计划竣工项目<span class="blue"
                        ><span class="blue">{{ zttj.计划完工 }}</span></span
                        >个，1-{{ zttj.月份 }}月份0个项目中已完工项目<span class="blue">0</span
                        >个,其中提前完工项目<span class="blue">{{
                                zttj.提前完工
                            }}</span
                        >个。
                        </p>
                        <h5>二、月进度计划完成情况</h5>
                        <p>
                            (一)、推进较好并完成1-{{ zttj.月份 }}月份进度计划的项目共<span
                            class="blue"
                            @click="clickToAdvanceTheSituation(12, zttj.年份, zttj.月份)"
                        >{{ zttj.进度较好 }}</span
                        >个。对照1-{{ zttj.月份 }}月份进度计划目标,综合分析各责任单位上报的月报进度表和实地督察情况，<span
                        >{{ zttj.项目数 }}</span
                        >个实施项目中有<span>{{ zttj.进度较好 }}</span
                        >个项目推进较好并已完成或超额完成月计划进度,占项目总数的61%。
                        </p>
                        <p>
                            (二)、未完成1-{{ zttj.月份 }}月份进度计划的共<span
                            class="blue"
                            @click="clickToAdvanceTheSituation(13, zttj.年份, zttj.月份)"
                        >{{ zttj.进度滞后 }}</span
                        >个项目
                        </p>
                    </div>
                </div>
                <div class="right">
                    <div class="title">计划执行情况</div>
                    <div class="detail">
                        <table border="1" cellspacing="0">
                            <thead>
                            <tr>
                                <th rowspan="2">序号</th>
                                <th rowspan="2" width="80px">单位</th>
                                <!-- <th rowspan="2" width="80px">总投资</th> -->
                                <th colspan="2">{{ this.zttj.年份 }}年计划安排投资</th>
                                <th colspan="3">{{ this.zttj.年份 }}年1-{{ this.zttj.月份 }}月份计划执行情况</th>
                            </tr>
                            <tr>
                                <th>项目个数</th>
                                <th>计划投资</th>
                                <th>完成投资</th>
                                <th>完成计划%</th>
                                <th>进度滞后</th>
                            </tr>
                            </thead>
                            <tbody>
<!--                            <tr style="height: 30px">
                                <td style="width: 8%"></td>
                                <td style="color: #000; width: 17%">合计</td>
                                <td style="width: 15%">176</td>
                                <td style="color: #000; width: 15%">1850069</td>
                                <td style="color: #000; width: 15%">1667715</td>
                                <td style="color: #000; width: 15%">90.1%</td>
                                <td>0</td>
                            </tr>-->
                            <tr
                                v-for="item in tableData"
                                :key="item.dwmc"
                                style="height: 30px"
                            >
                                <td>{{ item.index }}</td>
                                <td>
                                    {{ item.dwmc }}
                                </td>
                                <!-- <td>{{}}</td> -->
                                <td>{{ item.xmgs }}</td>
                                <td>{{ item.jhtz }}</td>
                                <td>{{ item.wctz }}</td>
                                <td>{{ item.wcjh }}</td>
                                <td>
                                    {{ item.jdzh }}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <column-view :chartdata="chartdata"></column-view>
        <div class="con2">
            <div class="title">
                <div class="left">———————————————</div>
                <div class="left-abs"></div>
                <div class="tt">项目库</div>
                <div class="right">———————————————</div>
                <div class="right-abs"></div>
            </div>
            <div class="con2-box">
                <img src="@/assets/images/4.png" alt=""/>
                <div
                    class="float"
                    @click="clickOnTheProjectLibrary('储备', projectNum.年份)"
                >
                    <div class="icon iconfont icon-baoyangjihua"></div>
                    <div class="word">
                        <p class="cu">储备项目</p>
                        <p>{{ projectNum.储备 }}</p>
                    </div>
                </div>
                <div
                    class="float"
                    @click="clickOnTheProjectLibrary('前期', projectNum.年份)"
                >
                    <div class="icon iconfont icon-xiangmu"></div>
                    <div class="word">
                        <p class="cu">前期项目</p>
                        <p>{{ projectNum.前期 }}</p>
                    </div>
                </div>
                <div
                    class="float"
                    @click="clickOnTheProjectLibrary('新建', projectNum.年份)"
                >
                    <div
                        class="icon iconfont icon-zhibaoyanshoushenqingliucheng-05"
                    ></div>
                    <div class="word">
                        <p class="cu">新建项目</p>
                        <p>{{ projectNum.新建 }}</p>
                    </div>
                </div>
                <div
                    class="float"
                    @click="clickOnTheProjectLibrary('续建', projectNum.年份)"
                >
                    <div class="icon iconfont icon-liyongjititudiyongdishiyong"></div>
                    <div class="word">
                        <p class="cu">续建项目</p>
                        <p>{{ projectNum.续建 }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="con1">
            <div class="con1-bx">
                <div class="title">
                    <div class="left">———————————————</div>
                    <div class="left-abs"></div>
                    <div class="tt">三色预警</div>
                    <div class="right">———————————————</div>
                    <div class="right-abs"></div>
                </div>
                <div class="con1-box">
                    <div class="left" v-for="(val,itemkey) in ssyjData" :key="itemkey">
                        <div class="name">{{itemkey}}</div>
                        <div class="items">
                            <div class="item" v-for="(val,key,index) in val" :key="key" @click="ssyjClick(itemkey,key)">
                                <img :src="require(`@/assets/images/${++ index}.png`)" alt=""/>
                                <div class="number">{{val}}</div>
                                <p>{{key}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        <div class="con4">
            <div class="con4-bx">
                <div class="left">
                    <div class="title">越城区{{ycqData.年份}}年1-{{ycqData.月份}}月各镇街固定资产投资增速排名</div>
                    <div class="content">
                        <table border="1" cellspacing="0">
                            <thead height="35px">
                            <tr>
                                <th>乡镇/街道</th>
                                <th width="230px">排名</th>
                                <th width="160px">增速</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in ycqData.数据列表" :key="item.name">
                                <td>{{item.name}}</td>
                                <td>{{item.sort}}</td>
                                <td>{{item.value}}%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="left">
                    <div class="title">绍兴市{{sxsData.年份}}年1-{{sxsData.月份}}月各区县固定资产投资增速排名</div>
                    <div class="content">
                        <table border="1" cellspacing="0">
                            <thead height="35px">
                            <tr>
                                <th>乡镇/街道</th>
                                <th width="230px">排名</th>
                                <th width="160px">投资数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in sxsData.数据列表" :key="item.name">
                                <td>{{item.name}}</td>
                                <td>{{item.sort}}</td>
                                <td>{{item.value}}%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>-->
        <map-view></map-view>
        <div class="bottom">
            <div class="bottom-bx">
                <div class="name">越城区滨海新区投资项目全生命周期服务管理平台</div>
                <p>牵头部门：绍兴市越城区发展和改革局</p>
                <p>部门地址：浙江省绍兴市越城区阳明北路683号科创大厦23楼</p>
                <br/>
                <p>技术支持：杭州城市大脑公司</p>
                <p>技术咨询：13297006539</p>
            </div>
        </div>
        <el-dialog :visible.sync="dialogTableVisible" width="95%">
            <el-table :data="gridData">
                <el-table-column
                    align="center"
                    type="index"
                    :index="indexMethod"
                    label="序号"
                ></el-table-column>
                <el-table-column
                    property="ItemName"
                    label="项目名称"
                    width="350"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="ItemTypeName"
                    label="项目类型"
                    width="100"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="KindText"
                    align="center"
                    label="项目性质"
                ></el-table-column
                >
                <el-table-column
                    property="Owner"
                    label="业主单位"
                    align="center"
                    width="120"
                ></el-table-column
                >
                <el-table-column
                    property="Address"
                    align="center"
                    label="建设地址"
                ></el-table-column
                >
                <el-table-column
                    property="Investment"
                    align="center"
                    label="总投资"
                ></el-table-column
                >
                <el-table-column
                    property="PlanInvestment"
                    label="本年计划投资"
                    align="center"
                    width="120"
                ></el-table-column
                >
                <el-table-column
                    property="Investment_D_T1"
                    label="本年完成投资"
                    align="center"
                    width="120"
                ></el-table-column
                >
                <el-table-column
                    property="Progress_D"
                    label="当年进度"
                    align="center"
                    width="300"
                ></el-table-column
                >
                <el-table-column
                    width="200"
                    property="Difficulty"
                    label="存在问题与困难"
                    align="center"
                ></el-table-column
                >
                <el-table-column
                    property="Responsible"
                    label="责任单位"
                    align="center"
                ></el-table-column
                >
                <el-table-column
                    property="FinishStatus"
                    label="进度状态"
                    align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="handleDtils(scope)" type="suceess"
                        >详情
                        </el-button
                        >
                    </template
                    >
                </el-table-column>
            </el-table>
            <el-dialog
                width="90%"
                title=""
                :visible.sync="innerVisible"
                append-to-body
            >
                <yuguVeiw :projectName="projectName"></yuguVeiw>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
import ColumnView from './ColumnView.vue';
import MapView from './MapView.vue';
import {HomeList} from '@/api/home.js';
import yuguVeiw from '@/components/yuguVeiw.vue';
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {ColumnView, MapView, yuguVeiw},
    data() {
        //这里存放数据
        return {
            projectNum: {},
            projectCate: [
                {项目分类:'千项万亿',icon: 'icon iconfont icon-cailiaogongcheng'},
                {项目分类:'省重点建设',icon: 'icon iconfont icon-zhengfujiguan'},
                {项目分类:'省重大产业',icon: 'icon iconfont icon-gejizhengfu'},
                {项目分类:'专项债',icon: 'icon iconfont icon-cailiaogongcheng'},
                {项目分类:'省集中开工',icon: 'icon iconfont icon-fuwuxiangmu'},
                {项目分类:'市“3355”',icon: 'icon iconfont icon-zhongdianxiangmu'}
            ],
            zttj: {},
            chartdata: {
                gsmc: [],
                jhtz: [],
                sjtz: [],
                年份:'',
                月份:'',
            },
            tableData: [],
            gridData: [],
            gridData1: [],
            dialogTableVisible: false,
            innerVisible: false,
            projectName: '',
            ssyjData:{},  //三色预警
            ycqData:{},  //越城区数据
            sxsData:{},  //绍兴市数据
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        //三色预警click
        ssyjClick(itemkey,key){
            let params = {
                action:itemkey==='前期节点预警'?'2_1':'2_2',
                pageType:itemkey==='前期节点预警'?'block':'table',
                valCode:"ycxmMC@2023!",
                w:key,
                from:'首页',
            }
            sessionStorage.setItem('pageParams',JSON.stringify(params));
            window.open(baseURL+'/mc2/');
        },
        //点击弹出鱼骨图
        handleDtils(val) {
            // this.projectName = val.row.ItemName;
            // this.innerVisible = true;
            let params = {
                action:'3_1',
                id:val.row.ID,
                from:'首页',
            }
            sessionStorage.setItem('pageParams',JSON.stringify(params));
            window.open(baseURL+'/mc2/#/project_detail');
        },
        initXm(val) {
            HomeList({action: val}).then((res) => {
                if (val == '项目库') {
                    this.projectNum = res.data;
                }
                else if (val == '项目分类') {
                    // this.projectCate = this.projectCate.map((item, index) => {
                    //     return {...item, ...res.data[index]};
                    // });
                }
                else if (val == '总体推进') {
                    this.zttj = res.data;
                }
                else if (val == '计划执行') {
                    //   res.data.项目个数.forEach((item, index) => {
                    //     this.tableData.push({ item }, {});
                    //   });

                    for (let i = 0; i < res.data.项目个数.length; i++) {
                        let obj = {};
                        obj.index = i + 1;
                        obj.xmgs = res.data.项目个数[i];
                        obj.dwmc = res.data.单位名称[i];
                        obj.jhtz = res.data.计划投资[i];
                        obj.wctz = res.data.完成投资[i];
                        obj.wcjh = res.data.完成年计划[i];
                        obj.jdzh = res.data.进度滞后[i];
                        // 对象推进数组
                        this.tableData.push(obj);
                    }
                    let totle = res.data.合计;
                    this.tableData.unshift({
                        xmgs:totle.PNum,
                        dwmc:'合计',
                        jhtz:totle.Data1,
                        wctz:totle.Data2,
                        wcjh:totle.Rate,
                        jdzh:totle.LagNum,
                    });
                    this.chartdata.gsmc = res.data.单位名称;
                    this.chartdata.jhtz = res.data.计划投资;
                    this.chartdata.sjtz = res.data.完成投资;
                    this.chartdata.年份 = res.data.年份;
                    this.chartdata.月份 = res.data.月份;
                }
                else if (val == '三色预警') {
                    this.ssyjData = res.data;
                }
                else if (val == '固投排名') {
                    this.ycqData = res.data.越城区各镇街固定资产投资增速;
                    this.sxsData = res.data.绍兴市各区县固定资产投资增速;
                }
                // if (val == '地图点位') {
                // }
                // if (val == '固投排名') {
                // }
            });
        },
        indexMethod(index) {
            return index + 1;
        },
        //点击项目库
        clickOnTheProjectLibrary(val, year) {
            HomeList({action: '项目列表', p_y: year, p_b: val}).then((res) => {
                this.gridData = res.data;
                this.dialogTableVisible = true;
            });
        },
        clickToAdvanceTheSituation(val, year, month) {
            HomeList({action: '项目列表', p_y: year, p_i: val, p_m: month}).then(
                (res) => {
                    console.log(res.data);
                    this.gridData = res.data;
                    this.dialogTableVisible = true;
                }
            );
        }
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    created() {
        this.initXm('固投排名');
        this.initXm('三色预警');
        this.initXm('项目库');
        this.initXm('项目分类');
        this.initXm('总体推进');
        this.initXm('计划执行');
        this.initXm('地图点位');
        this.initXm('固投排名');
    }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() {
    }, //生命周期 - 挂载之前
    mounted() {
    }, //生命周期 - 挂载完成（可以访问DOM元素）
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang="less">
.content {
    background-color: #f4f4f4;
    .con1 {
        margin-top: 20px;
        padding-top: 10px;
        padding-bottom: 40px;
        background-color: #fff;
        .con1-bx {
            width: 1200px;
            margin: 0 auto;
            .title {
                position: relative;
                display: flex;
                justify-content: center;
                height: 38px;
                line-height: 38px;
                .left,
                .right {
                    color: #026be1;
                }
                .left-abs,
                .right-abs {
                    width: 60px;
                    height: 10px;
                    background-color: #026be1;
                    position: absolute;
                    top: 14px;
                }
                .left-abs {
                    left: 660px;
                }
                .right-abs {
                    left: 480px;
                }
                .tt {
                    font-size: 24px;
                    font-weight: bold;
                    margin: 0 15px;
                }
            }
            .con1-box {
                margin-top: 30px;
                display: flex;
                justify-content: space-between;

                .left {
                    width: 40%;

                    .name {
                        width: 147px;
                        height: 44px;
                        background-color: #026be1;
                        color: #fff;
                        text-align: center;
                        line-height: 44px;
                        border-radius: 5px;
                        margin: 20px 0 30px 170px;
                    }
                    .items {
                        display: flex;
                        justify-content: space-between;
                        text-align: center;
                        .item {
                            position: relative;
                            .number {
                                position: absolute;
                                top: 23px;
                                left: 50%;
                                transform: translateX(-50%);
                                font-weight: bold;
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
    .con2 {
        width: 1200px;
        margin: 20px auto;
        .title {
            position: relative;
            display: flex;
            justify-content: center;
            height: 38px;
            line-height: 38px;
            .left,
            .right {
                color: #026be1;
            }
            .left-abs,
            .right-abs {
                width: 60px;
                height: 10px;
                background-color: #026be1;
                position: absolute;
                top: 14px;
            }
            .left-abs {
                left: 650px;
            }
            .right-abs {
                left: 490px;
            }
            .tt {
                font-size: 24px;
                font-weight: bold;
                margin: 0 15px;
            }
        }
        .con2-box {
            width: 1200px;
            height: 190px;
            background-color: #f2f7fd;
            box-shadow: 5px 5px 5px 2px #e3e3e3;
            margin-top: 20px;
            img {
                width: 160px;
                height: 190px;
                float: left;
                margin-right: 30px;
            }
            .float {
                width: 230px;
                height: 130px;
                background-color: #fff;
                box-shadow: 5px 5px 5px 2px #e3e3e3;
                margin-right: 22px;
                margin-top: 29px;
                float: left;
                cursor: pointer;
                .icon {
                    width: 66px;
                    height: 66px;
                    background-color: #f0f8fb;
                    border-radius: 50%;
                    margin: 32px 40px 0 10px;
                    float: left;
                    color: #0190f9;
                    font-size: 32px;
                    text-align: center;
                    line-height: 66px;
                }
                .word {
                    text-align: center;
                    margin: 32px 40px 0 10px;
                    .cu {
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
    .con3 {
        width: 1200px;
        margin: 0 auto 20px;
        .title {
            margin-left: 250px;
            position: relative;
            display: flex;
            height: 38px;
            line-height: 38px;

            .left,
            .right {
                color: #026be1;
            }

            .left-abs,
            .right-abs {
                width: 60px;
                height: 10px;
                background-color: #026be1;
                position: absolute;
                top: 14px;
            }

            .left-abs {
                left: 200px;
            }

            .right-abs {
                left: 430px;
            }

            .tt {
                font-size: 24px;
                font-weight: bold;
                margin: 0 15px;
            }
        }

        .con3-box {
            width: 1200px;
            display: flex;
            justify-content: space-between;

            .ling {
                width: 143px;
                height: 143px;
                background: url('@/assets/images/5.png') no-repeat center;
                background-size: cover;
                position: relative;

                .icon {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    color: #026be1;
                    position: absolute;
                    font-size: 45px;
                    line-height: 50px;
                    top: 19px;
                    left: 48px;
                }

                p {
                    font-size: 12px;
                    width: 70px;
                    text-align: center;
                    position: absolute;
                    top: 83px;
                    left: 40px;
                }
            }
        }
    }
    .con3-box2 {
        height: 470px;
        background: url('@/assets/images/bg.png') no-repeat center;
        background-size: cover;
        margin-top: 30px;
        .con3-box2-bx {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            .left {
                width: 520px;
                .title {
                    color: #fff;
                    font-weight: bold;
                    text-align: center;
                    font-size: 20px;
                    margin-top: 20px;
                }
                .details {
                    width: 500px;
                    height: 360px;
                    background-color: #fbfbfb;
                    padding: 10px 20px;
                    margin-top: 20px;

                    h5 {
                        margin: 20px 0;
                    }

                    p {
                        font-size: 12px;
                        line-height: 30px;
                        color: #242424;

                        .blue {
                            color: #0190f9;
                            cursor: pointer;
                        }
                    }
                }
            }
            .right {
                width: 520px;
                margin-left: 20px;
                .title {
                    color: #fff;
                    font-weight: bold;
                    text-align: center;
                    font-size: 20px;
                    margin-top: 20px;
                }
                .detail {
                    width: 560px;
                    height: 380px;
                    background-color: #fff;
                    margin-top: 20px;
                    overflow: overlay;
                    table {
                        width: 560px;
                        height: 380px;
                        text-align: center;
                        font-size: 12px;
                        border: 2px solid #0190f9;
                        thead {
                            height: 90px;
                            font-size: 12px;
                            border: 1px solid #0190f9;
                        }
                        tbody {
                            border: 1px solid #eaeef1;
                            color: #2ca2fc;
                            >tr:nth-child(1){
                                td:nth-child(3),td:nth-child(5),td:nth-child(6){
                                    color: #000;
                                }
                            }
                            .iconfont {
                                margin-left: 5px;
                            }
                            .red {
                                color: red;
                            }
                            .orange {
                                color: #f56100;
                            }
                            .yellow {
                                color: #fbed00;
                            }
                        }
                    }
                }
            }
        }
    }
    .con4 {
        height: 400px;
        background-color: #fff;
        margin-top: 20px;
        padding: 20px 0;
        .con4-bx {
            width: 1200px;
            margin: 0 auto;
            .left {
                width: 43%;
                float: left;
                margin-left: 66px;
                .title {
                    color: #000;
                    font-weight: bold;
                    margin-bottom: 20px;
                    text-align: center;
                }
                >.content{
                    max-height: 334px;
                    overflow: auto;
                    table {
                        width: 100%;
                        height: 334px;
                        text-align: center;
                        font-size: 14px;
                        border: 3px solid #0190f9;
                        border-top: 0;
                        thead {
                            border: 2px solid #0190f9;
                            position: sticky;
                            top: 0;
                            background-color: #fff;
                            th{border-top: 3px solid #0190f9;}
                        }
                        tbody {
                            border: 1px solid #eaeef1;
                            color: #2ca2fc;
                            tr{height: 40px;}
                        }
                    }
                }
            }
        }
    }
    .bottom {
        height: 66px;
        background-color: #0088fe;
        margin-top: 80px;
        color: #fff;
        .bottom-bx {
            width: 1200px;
            margin: 0 auto;
            .name {
                height: 66px;
                line-height: 66px;
                font-weight: bold;
                float: left;
                margin-right: 60px;
            }
            p {
                float: left;
                font-size: 14px;
                margin-left: 40px;
                margin-top: 15px;
                margin-bottom: -5px;
            }
        }
    }
}
</style>
